<template>
  <div class="message">
    <div class="avatar">
      <img class="avatar-image" :src="message.head" />
      <div class="avatar-nft">

      </div>
    </div>
    <div class="content">
      <div class="username">
        {{ message.username }}
      </div>
      <div class="menu">

      </div>
      <div class="text" v-html="message.content" />
      <div v-if="images.length" class="images" :class="{
        single: images.length === 1,
        double: images.length === 2,
        triple: images.length === 3,
        quadruple: images.length === 4,
      }">
        <div v-for="image in images" :key="image" class="image-wrapper">
          <el-image fit="cover" :preview-src-list="images" :src="image" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div v-if="message.video_url" class="video-wrapper">
        <video class="video" controls :src="message.video_url" />
      </div>
      <div class="datetime">
        {{ message.create_time }}
      </div>
      <div class="actions">
        <div class="action like-action" :class="{
          active: liked,
        }" @click="like">
          <like-icon />
          <div v-if="likeNum" class="action-text">
            {{ likeNum }}
          </div>
        </div>
        <div class="action comment-action" @click="goDetail()">
          <comment-icon />
          <div v-if="message.comment_num" class="action-text">
            {{ message.comment_num }}
          </div>
        </div>
        <div class="action repost-action">
          <repost-icon />
          <div v-if="message.copy_num" class="action-text">
            {{ message.copy_num }}
          </div>
        </div>
        <div
          class="action share-action"
          v-clipboard:copy="shareUrl"
          v-clipboard:success="() => $message.info('The content you want to share has been copied')"
        >
          <share-icon />
          <div v-if="message.share_num" class="action-text">
            {{ message.share_num }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import LikeIcon from './icons/LikeIcon.vue'
import CommentIcon from './icons/CommentIcon.vue'
import RepostIcon from './icons/RepostIcon.vue'
import ShareIcon from './icons/ShareIcon.vue'
import { likeReview } from '@/api/monico/home'

export default {
  components: {
    LikeIcon,
    CommentIcon,
    RepostIcon,
    ShareIcon,
  },
  props: {
    message: {
      type: Object,
    },
  },
  data() {
    return {
      likeDelta: 0,
      lightboxVisible: false,
    }
  },
  computed: {
    liked() {
      return (this.message.like_status === 1 && this.likeDelta !== -1) || this.likeDelta === 1
    },
    likeNum() {
      return this.message.like_num + this.liked ? 1 : 0
    },
    images() {
      return this.message.image_url ? this.message.image_url.filter(x => !!x) : []
    },
    shareUrl() {
      return `${window.location.protocol}//${window.location.host}/postDetail?messageId=${this.message.id}`
    },
  },
  methods: {
    viewImage(idx) {
      this.lightboxVisible = true
      this.$refs.lightbox.setActiveItem(idx)
    },
    like() {
      // like status: 0 -> no, 1 -> yes
      // like type: 1 -> like, 2 -> cancel
      const like_type = this.liked ? 2 : 1

      likeReview(qs.stringify({
        id: this.message.id,
        object_type: 1,
        like_type,
      })).then(() => {
        if (like_type === 1) {
          this.likeDelta = 1
        } else {
          this.likeDelta = -1
        }
      })
    },
    goDetail() {
      this.$router.push({path: `/post/${this.message.id}`})
    }
  },
}
</script>

<style lang="less" scoped>
.message {
  padding: 20px 20px;
  border-radius: 4px;
  display: flex;
  background: #1F1F1F;

  &:not(:first-child) {
    margin-top: 14px;
  }

  .avatar {
    width: 40px;

    .avatar-image {
      border-radius: 20px;
      width: 40px;
      height: 40px;
    }
  }

  .content {
    margin-left: 20px;
    flex: 1;

    .username {
      height: 24px;
      font-size: 14px;
      font-weight: 600;
      line-height: 24px;
      color: #FFFFFF;
    }

    .text {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #C4C4C4;

      a {
        text-decoration: none;
        color: #32C2FF;
      }
    }

    .images {
      border-radius: 8px;
      width: 504px;
      height: 275px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      column-gap: 10px;
      row-gap: 10px;
      overflow: hidden;

      &.single {
        .image-wrapper {
          grid-column: 1 / span 2;
          grid-row: 1 / span 2;
        }
      }

      &.double {
        .image-wrapper:nth-child(1) {
          grid-column: 1 / span 1;
          grid-row: 1 / span 2;
        }

        .image-wrapper:nth-child(2) {
          grid-column: 2 / span 1;
          grid-row: 1 / span 2;
        }
      }

      &.triple {
        .image-wrapper:nth-child(1) {
          grid-column: 1 / span 1;
          grid-row: 1 / span 2;
        }

        .image-wrapper:nth-child(2) {
          grid-column: 2 / span 1;
          grid-row: 1 / span 1;
        }

        .image-wrapper:nth-child(3) {
          grid-column: 2 / span 1;
          grid-row: 2 / span 1;
        }
      }

      &.quadruple {
        .image-wrapper:nth-child(1) {
          grid-column: 1 / span 1;
          grid-row: 1 / span 1;
        }

        .image-wrapper:nth-child(2) {
          grid-column: 2 / span 1;
          grid-row: 1 / span 1;
        }

        .image-wrapper:nth-child(3) {
          grid-column: 1 / span 1;
          grid-row: 2 / span 1;
        }

        .image-wrapper:nth-child(4) {
          grid-column: 2 / span 1;
          grid-row: 2 / span 1;
        }
      }

      .image-wrapper {
        overflow: hidden;
      }
    }

    .video-wrapper {
      border-radius: 8px;
      width: 504px;
      height: 275px;
      overflow: hidden;
    }

    .video {
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
    }

    .datetime {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: #898989;
    }

    .actions {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .action {
        min-width: 80px;
        display: flex;
        align-items: center;
        fill: #898989;
        color: #898989;

        &.active {
          &.like-action {
            fill: #FC6C50;
            color: #FC6C50;
          }

          &.comment-action {
            fill: #0BC5A8;
            color: #0BC5A8;
          }

          &.repost-action {
            fill: #998EFF;
            color: #998EFF;
          }

          &.share-action {
            fill: #32C2FF;
            color: #32C2FF;
          }
        }

        .action-text {
          margin-left: 6px;
          font-size: 12px;
          font-weight: 500;
          line-height: 16px;
        }
      }
    }
  }
}
</style>
